<template>
  <TopNav title="患者营养数据记录"/>
  <div class="nutrition-data-recording-page">

    <!-- 患者信息区域 -->
    <div class="patient-info-section">
      <h2 class="section-title">患者信息</h2>
      <el-form :model="patientForm">
        <el-form-item label="姓名">
          <el-input v-model="patientForm.name"></el-input>
        </el-form-item>
        <el-form-item label="年龄">
          <el-input-number v-model="patientForm.age"></el-input-number>
        </el-form-item>
        <el-form-item label="性别">
          <el-radio-group v-model="patientForm.gender">
            <el-radio label="男"></el-radio>
            <el-radio label="女"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="病历号">
          <el-input v-model="patientForm.medicalRecordNumber"></el-input>
        </el-form-item>
      </el-form>
    </div>

    <!-- 营养数据录入区域 -->
    <div class="nutrition-data-entry-section">
      <h2 class="section-title">营养数据录入</h2>
      <el-form :model="nutritionDataForm">
        <el-form-item label="日期">
          <el-date-picker
              v-model="nutritionDataForm.date"
              type="date"
              placeholder="请选择日期"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="早餐热量(kcal)">
          <el-input-number v-model="nutritionDataForm.breakfastCalories"></el-input-number>
        </el-form-item>
        <el-form-item label="午餐热量(kcal)">
          <el-input-number v-model="nutritionDataForm.lunchCalories"></el-input-number>
        </el-form-item>
        <el-form-item label="晚餐热量(kcal)">
          <el-input-number v-model="nutritionDataForm.dinnerCalories"></el-input-number>
        </el-form-item>
        <el-form-item label="蛋白质摄入量(g)">
          <el-input-number v-model="nutritionDataForm.proteinIntake"></el-input-number>
        </el-form-item>
        <el-form-item label="碳水化合物摄入量(g)">
          <el-input-number v-model="nutritionDataForm.carbohydrateIntake"></el-input-number>
        </el-form-item>
        <el-form-item label="脂肪摄入量(g)">
          <el-input-number v-model="nutritionDataForm.fatIntake"></el-input-number>
        </el-form-item>
        <el-form-item label="维生素摄入量(mg)">
          <el-input-number v-model="nutritionDataForm.vitaminIntake"></el-input-number>
        </el-form-item>
        <el-form-item label="矿物质摄入量(mg)">
          <el-input-number v-model="nutritionDataForm.mineralIntake"></el-input-number>
        </el-form-item>
      </el-form>
      <el-button
          type="primary"
          @click="saveNutritionData"
          :disabled="!nutritionDataForm.date ||!nutritionDataForm.breakfastCalories ||!nutritionDataForm.lunchCalories ||!nutritionDataForm.dinnerCalories ||!nutritionDataForm.proteinIntake ||!nutritionDataForm.carbohydrateIntake ||!nutritionDataForm.fatIntake ||!nutritionDataForm.vitaminIntake ||!nutritionDataForm.mineralIntake"
      >保存数据</el-button>
    </div>

    <!-- 数据查看区域 -->
    <div class="data-view-section">
      <h2 class="section-title">数据查看</h2>
      <el-table :data="nutritionDataList" style="width: 100%">
        <el-table-column prop="date" label="日期" width="120"></el-table-column>
        <el-table-column prop="breakfastCalories" label="早餐热量(kcal)" width="120"></el-table-column>
        <el-table-column prop="lunchCalories" label="午餐热量(kcal)" width="120"></el-table-column>
        <el-table-column prop="dinnerCalories" label="晚餐热量(kcal)" width="120"></el-table-column>
        <el-table-column prop="proteinIntake" label="蛋白质摄入量(g)" width="120"></el-table-column>
        <el-table-column prop="carbohydrateIntake" label="碳水化合物摄入量(g)" width="120"></el-table-column>
        <el-table-column prop="fatIntake" label="脂肪摄入量(g)" width="120"></el-table-column>
        <el-table-column prop="vitaminIntake" label="维生素摄入量(mg)" width="120"></el-table-column>
        <el-table-column prop="mineralIntake" label="矿物质摄入量(mg)" width="120"></el-table-column>
      </el-table>
    </div>

    <!-- 数据可视化区域（可展示营养成分比例等） -->
    <div class="visualization-section">
      <h2 class="section-title">数据可视化</h2>
      <div id="chart-container" style="width: 100%; height: 300px;"></div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue';
import * as echarts from 'echarts';
import TopNav from "@/components/TopNav/Back.vue"
// 患者信息表单数据
const patientForm = ref({
  name: '',
  age: 0,
  gender: '',
  medicalRecordNumber: ''
});

// 营养数据表单数据
const nutritionDataForm = ref({
  date: '',
  breakfastCalories: 0,
  lunchCalories: 0,
  dinnerCalories: 0,
  proteinIntake: 0,
  carbohydrateIntake: 0,
  fatIntake: 0,
  vitaminIntake: 0,
  mineralIntake: 0
});

// 营养数据列表
const nutritionDataList = ref([]);

// 保存营养数据
const saveNutritionData = () => {
  // 这里可以添加将数据发送到后端存储的逻辑
  nutritionDataList.value.push({...nutritionDataForm.value });
  nutritionDataForm.value = {
    date: '',
    breakfastCalories: 0,
    lunchCalories: 0,
    dinnerCalories: 0,
    proteinIntake: 0,
    carbohydrateIntake: 0,
    fatIntake: 0,
    vitaminIntake: 0,
    mineralIntake: 0
  };

  // 更新数据可视化
  updateVisualization();
};

// 更新数据可视化（简单示例，可根据实际需求完善）
const updateVisualization = () => {
  const chartDom = document.getElementById('chart-container');
  const myChart = echarts.init(chartDom);
  const xAxisData = nutritionDataList.value.map((data) => data.date);
  const yAxisData = [
    nutritionDataList.value.map((data) => data.proteinIntake),
    nutritionDataList.value.map((data) => data.carbohydrateIntake),
    nutritionDataList.value.map((data) => data.fatIntake)
  ];
  const option = {
    xAxis: {
      type: 'category',
      data: xAxisData
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        name: '蛋白质',
        type: 'bar',
        data: yAxisData[0],
        barWidth: 20,
        itemStyle: {
          color: '#5cb85c'
        }
      },
      {
        name: '碳水化合物',
        type: 'bar',
        data: yAxisData[1],
        barWidth: 20,
        itemStyle: {
          color: '#007bff'
        }
      },
      {
        name: '脂肪',
        type: 'bar',
        data: yAxisData[2],
        barWidth: 20,
        itemStyle: {
          color: '#d9534f'
        }
      }
    ]
  };
  myChart.setOption(option);
};

// 页面加载时初始化图表
onMounted(() => {
  const chartDom = document.getElementById('chart-container');
  const myChart = echarts.init(chartDom);
  const xAxisData = [];
  const yAxisData = [[], [], []];
  const option = {
    xAxis: {
      type: 'category',
      data: xAxisData
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        name: '蛋白质',
        type: 'bar',
        data: yAxisData[0],
        barWidth: 20,
        itemStyle: {
          color: '#5cb85c'
        }
      },
      {
        name: '碳水化合物',
        type: 'bar',
        data: yAxisData[1],
        barWidth: 20,
        itemStyle: {
          color: '#007bff'
        }
      },
      {
        name: '脂肪',
        type: 'bar',
        data: yAxisData[2],
        barWidth: 20,
        itemStyle: {
          color: '#d9534f'
        }
      }
    ]
  };
  myChart.setOption(option);
});
</script>

<style scoped>
.nutrition-data-recording-page {
  padding: 20px;
  background-color: #f4f4f5;
  border-radius: 15px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
.page-header {
  text-align: center;
  margin-bottom: 20px;
}
.header-title {
  color: #303133;
  font-size: 28px;
}
.patient-info-section {
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  padding: 20px;
  margin-bottom: 20px;
}
.section-title {
  color: #303133;
  margin-bottom: 10px;
}
.nutrition-data-entry-section {
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  padding: 20px;
  margin-bottom: 20px;
}
.data-view-section {
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  padding: 20px;
  margin-bottom: 20px;
}
.visualization-section {
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  padding: 20px;
}
</style>
